<template>
  <div class="config-base">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <div class="form-item-block">
        <el-form-item label="工单模型名称" prop="modelName" class="name">
          <el-input v-model="ruleForm.modelName" :minlength="1" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="工单编号前缀" prop="modelPrefix" class="prefix">
          <el-input v-model="ruleForm.modelPrefix" :minlength="2" :maxlength="4"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="描述" prop="remark">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" show-word-limit maxlength="200" v-model="ruleForm.remark"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { isLetter } from '@/utils/validate'
import { busConfigStore } from '../store/busConfigStore';
import { commonAction } from '@/utils/common'
@Component({
  name: 'baseMessage',
  components: {
  }
})
export default class extends Vue {
  [x: string]: any;
  private unwatch: any = null;
  private ruleForm = {
    modelName: '',
    modelPrefix: '',
    remark: ''
  }

  private validateModelPrefix = (rule, value, callback) => {
    if (!isLetter(value)) {
      callback(new Error('请输入工单编号前缀,必须是2-4的字符并且只能是大小写字母'))
    } else {
      callback()
    }
  }

  private rules = {
    modelName: [
      { required: true, message: '请输入工单模型名称', trigger: 'blur' },
      { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ],
    modelPrefix: [
      { required: true, message: '请输入工单编号前缀,必须是2-4的字符并且只能是大小写字母', validator: this.validateModelPrefix, trigger: 'blur' },
      { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
    ]
  }

  public save () {
    (this as any).$refs.ruleForm.validate((valid) => {
      if (valid) {
        if (this.$route.params.businessId === 'addService') {
          commonAction({ url: '/server-work/action/workOrderModel/insert', method: 'post', data: this.ruleForm }).then(res => {
            if (res.success) {
              this.$router.replace(`/customer_template_setting/${res.data.id}/base`)
              this.$message.success('保存成功')
              busConfigStore.baseChange = false;
            }
          })
        } else {
          commonAction({
            url: '/server-work/action/workOrderModel/update',
            method: 'post',
            data: Object.assign(
              { id: this.$route.params.businessId },
              this.ruleForm
            )
          }).then(res => {
            if (res.success) {
              this.$message.success('修改成功')
              busConfigStore.baseChange = false;
            }
          })
        }
      } else {
        return false
      }
    })
  }

  // 添加字段list的监听
  private addListWatch () {
    busConfigStore.baseChange = false;
    if (this.unwatch) {
      this.unwatch();
    }
    this.unwatch = this.$watch(
      'ruleForm',
      () => {
        busConfigStore.baseChange = true;
        console.log('baseChange')
        this.unwatch();
      },
      { deep: true }
    );
  }

  private activated () {
    this.getFetch()
  }

  private getFetch () {
    if (this.$route.params.businessId !== 'addService') {
      commonAction({
        url: '/server-work/action/workOrderModel/search',
        method: 'post',
        data: { modelId: this.$route.params.businessId }
      }).then(res => {
        if (res.success) {
          const { modelName, modelPrefix, remark } = res.data
          this.ruleForm = {
            modelName,
            modelPrefix,
            remark
          }
          this.addListWatch()
        }
      })
    } else {
      this.ruleForm = {
        modelName: '',
        modelPrefix: '',
        remark: ''
      }
      this.addListWatch()
    }
  }

  private mounted () {
    this.getFetch()
    // commonAction({
    //   url: '/server-work/action/workOrderModel/getConfig',
    //   method: 'post',
    //   data: { modelId: this.$route.params.businessId, queryFieldType: 1 }
    // })
  }
}
</script>
<style lang="stylus" scoped>
.config-base {
  margin: 16px 50px
  .form-item-block {
    display: flex;
    justify-content: space-between
    .name {
      flex: 1
      margin-right: 50px
    }
    .prefix {
      flex: 1
    }
  }
}
</style>
